<template>
	<div>
		<el-form-item
			label="题干"
			prop="questionTitle"
			:rules="{
				required: true,
				message: '请输入题干',
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i slot="suffix" @click="handleEdit(questionForm.questionTitle,'questionTitle')" class="el-icon-edit-outline icons" />
				</el-input>
			</template>
		</el-form-item>
		<el-form-item
			label="答案"
			prop="answer"
			:rules="{
				required: true,
				message: '请选择答案',
				trigger: 'change'
			}"
		>
			<el-radio-group v-model="answer">
				<el-radio label="1">正确</el-radio>
				<el-radio label="2">错误</el-radio>
			</el-radio-group>
		</el-form-item>
	</div>
</template>
<script >
export default {
    name:'q-judge-edit',
    props:{
        value: {
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            questionForm:{},
            answer:''
        };
    },
      watch:{
        value:{
            immediate:true,
            deep:true,
            handler(val){
                this.questionForm =  JSON.parse(JSON.stringify(val));
                if(val.optionList && val.optionList.length){
                    this.answer = val.optionList[0].answerOption==='正确'?'1':'2';
                } else {
                    this.answer = '';
                    this.questionForm.answer = '';
                }
            }
        },
        answer:{
            immediate:true,
            handler(val){
                if(val){
                    let option = {
                        optionSeq:'A',
                        isAnswer:'Y',
                        answerOption:val==='1'?'正确':'错误',
                        answerSeq:1
                    };
                    this.$set(this.questionForm,'optionList',[option]);
                }
            }

        },
        'questionForm.optionList':{
            immediate:true,
            deep: true,
            handler(val){
                val && this.setAnswer();
            }
        },
        questionForm:{
            immediate:true,
            deep: true,
            handler(val){
                this.$emit('change',val);
            }
        }
    },
    methods:{
        setAnswer(){
            const answerOptionList = this.questionForm.optionList.filter( option=>option.isAnswer==='Y');
            const answerList =  answerOptionList.map(option=>option.answerOption);
            this.questionForm.answer =  answerList.join(',');
        },
        // 编辑
        handleEdit(value,key){
            this.$emit('edit',value,key);
        }
    }
};

</script>
<style scoped lang="less">
.icons{
    cursor: pointer;
    font-size: 20px;
    margin-top: 7px;
}
/deep/.el-radio-group{
    width: 400px;
}

</style>
